<script>
import _ from 'lodash';

export default {
  name: 'qt-button',

  props: {
    color: {
      default: '#1e5bc6',
      type: String,
    },
  },

  render() {
    const data = {
      attrs: this.$attrs,
      props: {
        props: this.$props,
        block: true,
        square: true,
        color: this.color,
        nativeType: 'button',
      },
      on: {
        listeners: this.$listeners,
        click: _.debounce(
          (event) => {
            this.$emit('click', event);
          },
          400,
          {
            leading: true,
            trailing: false,
          },
        ),
      },
    };

    return (
      <div>
        <van-button {...data}>{this.$scopedSlots.default}</van-button>
      </div>
    );
  },
};
</script>
